<template>
  <div class="app-container">
  <div class="page_header">
    页面配置
</div>
<div class="drags">
  <div class="leftC">
    <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
      >
        <el-sub-menu index="1">
          <template #title>
            <span>登录页</span>
          </template>
            <el-menu-item @click="menuHandle" index="1-1">类型一</el-menu-item>
            <el-menu-item @click="menuHandle" index="1-2">类型二</el-menu-item>
        </el-sub-menu>
      </el-menu>
  </div>
  <!-- background-image: url("/dev-api/profile/upload/2023/06/28/an_20230628144345A013.jpg"); -->
  <!-- background-image: url("/profile/upload/2023/06/28/an_20230628144345A013.jpg"); -->
  <div v-if="current=='1-1'" class="contain" :style="{backgroundImage:'url('+ns+')'}">
    <div class="el-login-top">
      <!-- {{loginPage.title}} -->
      <img :src="formLabelAlign.logoUrl?baseUrl+formLabelAlign.logoUrl:loginPage.titleImg" alt="">
    </div>
    <el-form class="login-form position" :style="positions">
      <h3 class="title">{{loginPage.title}}</h3>
      <el-form-item prop="username">
        <el-input
          type="text"
          size="mini"
          disabled
          auto-complete="off"
          placeholder="账号"
        >
          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          type="password"
          size="mini"
          disabled
          auto-complete="off"
          placeholder="密码"
        >
          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
        </el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input
          size="mini"
          disabled
          auto-complete="off"
          placeholder="验证码"
          style="width: 63%"
        >
          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
        </el-input>
        <div class="login-code">
        </div>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button
          size="mini"
          type="primary"
          style="width:100%;"
          disabled
        >登录
        </el-button>
      </el-form-item>
    </el-form>
    <!--  底部  -->
    <div class="el-login-footer">
      <div >{{formLabelAlign.title}}</div>
    </div>
  </div>
  <!-- <div v-if="current=='1-2'" class="contain" :style="{backgroundImage:'url('+baseUrl+formLabelAlign.loginBac2+')'}">
    <div class="leftBox">
      <div>
        <div>
          <img :src="baseUrl+formLabelAlign.leftImg" alt="">
        </div>
      </div>
    </div>
    <div class="el-login-footer">
      <div >{{loginPage.pageFooter}}</div>
    </div>
  </div> -->
  <div class="leftR" v-if="current=='1-1'">
    <el-form
    :label-position="labelPosition"
    label-width="100px"
    :model="formLabelAlign"
    style="max-width: 460px"
  >
    <el-form-item label="LOGO图片">
      <imageLoad  :isShowTip="false" :limit="1" v-model:modelValue="formLabelAlign.logoUrl"></imageLoad>
    </el-form-item>
    <el-form-item label="底部信息一">
      <el-input v-model="formLabelAlign.title" />
    </el-form-item>
    <!-- <el-form-item label="底部信息二">
      <el-input v-model="formLabelAlign.type" />
    </el-form-item> -->
    <el-form-item label="背景">
      <imageLoad :isShowTip="false" :limit="1" v-model:modelValue="formLabelAlign.backgroundUrl"></imageLoad>
    </el-form-item>
    <el-form-item  label="登录框位置">
      <el-radio-group v-model="formLabelAlign.loginPosition" style="margin-bottom: 30px">
    <el-radio-button label="left">左</el-radio-button>
    <el-radio-button label="center">中</el-radio-button>
    <el-radio-button label="right">右</el-radio-button>
  </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button  type="primary"  @click="HandleInsert">保存配置</el-button>
    </el-form-item>
  </el-form>
  </div>
</div>
  </div>

</template>

<script lang="ts" setup>
import { ref, computed, reactive, watch } from 'vue'
import type { Ref } from 'vue'
import useSettingsStore from '@/store/modules/settings'
import imageLoad from '@/components/ImageUpload/index'
import { usePosition } from "./hooks/usePosition"
import { ElMessage } from 'element-plus'
import { pageConfigList, handlePageInsert } from '@/api/system/config'
interface configType{
  logoUrl:string,
  backgroundUrl:string,
  title: string,
  loginPosition:string
}
// interface positionType{
//   left: string,
//     right: string,
//     top: string,
//     bottom: string
// }
const settingsStore = useSettingsStore()
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const loginPage = computed(() => settingsStore.loginPage);
const labelPosition = ref('right')
let current = ref('1-1')
let onlineList:configType = reactive({
  logoUrl: "",
  backgroundUrl: "",
  title: "",
  loginPosition:""
})
// const radio1 = ref<string>('left')


let formLabelAlign: Ref<configType> = ref({
  logoUrl: "",
  backgroundUrl: "",
  title: "",
  loginPosition:""
})
let radio1 = computed(() => {
  return formLabelAlign.value.loginPosition|| 'left'
})
let{positions}  =usePosition(radio1)
let ns = computed(() => {
return  formLabelAlign.value.backgroundUrl? baseUrl+formLabelAlign.value.backgroundUrl: loginPage.value.backgroundImg
})
function menuHandle(e) {
  current.value =e.index
  console.log(e);
}
function demo() {
  pageConfigList({ pageSize: 10, pageNumber: 1 }).then((response) => {
    if (response.rows[response.rows.length - 1]) {
        onlineList = response.rows[response.rows.length - 1]
      formLabelAlign.value = {
        logoUrl: onlineList.logoUrl,
        backgroundUrl: onlineList.backgroundUrl,
        title: onlineList.title,
        loginPosition:onlineList.loginPosition
      }
    } else {
      formLabelAlign.value = {
        logoUrl:null,
        backgroundUrl:null,
        title: '',
        loginPosition:"left"
        // logoUrl:loginPage.value.titleImg,
        // backgroundUrl:  loginPage.value.backgroundImg,
        // title:loginPage.value.pageFooter,
      }
    }

console.log(formLabelAlign);
  })
}
function HandleInsert() {
  handlePageInsert(formLabelAlign.value).then(res => {
    if (res === 1) {
      ElMessage({
    message: '配置保存成功！',
    type: 'success',
  })
    }

  })
}
// handlePageInsert
demo()
</script>
<style lang="scss" scoped>
.page_header{
  padding: 10px 20px;
    border-bottom: 1px solid #f2f2f2;
    margin-bottom: 10px;
    border-radius: 5px;
    margin: 0;
    background-color: #fff;
}
.app-container{
  min-height: calc(100vh - 84px);
    background-color: #f4f7ff;
    padding: 20px;
}
.contain{
width: 960px;
height: 540px;
// transform: scale(0.8);
background-size: cover;
position: relative;
flex: 1;
display: flex;
align-items: center;
}
.el-login-top{
  height: 40px;
  line-height: 40px;
  line-height: 13px;
  position: absolute;
  top: 0px;
  width: 100%;
  background: #ffffff;
  // display: flex;
  img{
  position: absolute;
  height: 80%;
  width: auto;
  top: 0;
  bottom: 0;
  margin: auto;
  margin-left: 23px;
  }
}
.el-login-footer {
  background: #ffffff;
  height: 45px;
  padding: 10px 0;
  box-sizing: border-box;
  line-height: 15px;
  position: absolute;
  bottom: 0px;
  width: 100%;
  text-align: center;
  color: #657B9D;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.leftC{
flex: auto 0 0;
width: 200px;
}
.leftR{
  flex: auto 0 0;
width: 300px;
}
.drags{
display: flex;

}
.leftBox{
  position: absolute;
  left: 9%;
width: 18%;
img{
    width: 100%;
    height: auto;
}
}
.login-form {
  border-radius: 3px;
    position: absolute;
    margin: auto;
    height: 260px;
    background: #ffffff;
    width: 250px;
    padding: 25px 12px 2px 12px;
  .input-icon {
    height: 20px;
    width: 7px;
    margin-left: 0px;
  }
}
.position{
  right: 15%;
    top: 0;
    bottom: 0;
}
.title {
  margin: 0px auto 15px auto;
  text-align: center;
  color: #707070;
}
</style>